<template>
  <div class="mine-container">
    <!-- 用户信息头部 -->
    <div class="user-info">
      <div class="avatar">
        <img :src="userInfo.avatar" alt="avatar" />
      </div>
      <div class="username">
        <h3>{{ userInfo.name ?? "默认昵称" }}</h3>
      </div>
    </div>

    <!-- 功能按钮组 -->
    <div class="function-group">
      <div class="function-item" @click="$router.push('/home/article/latest')">
        <img src="@/assets/history.svg" alt="历史" />
        <span>历史记录</span>
      </div>
      <div class="function-item" @click="$router.push('/home/collect')">
        <img src="@/assets/collection.svg" alt="收藏" />
        <span>我的收藏</span>
      </div>
      <div class="function-item" @click="$router.push('/home/like')">
        <img src="@/assets/like.svg" alt="点赞" />
        <span>我的点赞</span>
      </div>
    </div>

    <!-- 菜单列表 -->
    <div class="menu-list">
      <div class="menu-item" @click="$router.push('/recommend')">
        <span>推荐分享</span>
        <img src="@/assets/jt_right.svg" alt="箭头" />
      </div>
      <div class="menu-item" @click="$router.push('/feedback')">
        <span>意见反馈</span>
        <img src="@/assets/jt_right.svg" alt="箭头" />
      </div>
      <div class="menu-item" @click="$router.push('/about')">
        <span>关于我们</span>
        <img src="@/assets/jt_right.svg" alt="箭头" />
      </div>
      <div class="menu-item" @click="handleLogout">
        <span>退出登录</span>
        <img src="@/assets/jt_right.svg" alt="箭头" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "MinePage",
  data() {
    return {
      token: "",
      userInfo: {},
    };
  },
  methods: {
    handleLogout() {
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
    getUserInfo() {
      axios
        .get("http://interview-api-t.itheima.net/h5/user/currentUser", {
          headers: {
            Authorization: `Bearer ${this.token}`,
          },
        })
        .then((res) => {
          console.log(res);
          this.userInfo = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$toast.fail("身份信息过期，请重新登录");
      this.$router.push("/login");
      return;
    }
    this.getUserInfo();
  },
};
</script>

<style lang="less" scoped>
.mine-container {
  padding: (20/3.75vw);
  background-color: #f5f5f5;
  min-height: 100vh;

  .user-info {
    display: flex;
    align-items: center;
    padding: (20/3.75vw);
    background-color: #fff;
    border-radius: (10/3.75vw);
    margin-bottom: (20/3.75vw);

    .avatar {
      width: (60/3.75vw);
      height: (60/3.75vw);
      margin-right: (15/3.75vw);

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .username {
      h3 {
        font-size: (18/3.75vw);
        font-weight: normal;
      }
    }
  }

  .function-group {
    display: flex;
    justify-content: space-between;
    padding: (20/3.75vw);
    background-color: #fff;
    border-radius: (10/3.75vw);
    margin-bottom: (20/3.75vw);

    .function-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;

      img {
        width: (24/3.75vw);
        height: (24/3.75vw);
        margin-bottom: (8/3.75vw);
      }

      span {
        font-size: (14/3.75vw);
        color: #333;
      }
    }
  }

  .menu-list {
    background-color: #fff;
    border-radius: (10/3.75vw);

    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: (15/3.75vw) (20/3.75vw);
      border-bottom: 1px solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      span {
        font-size: (16/3.75vw);
        color: #333;
      }

      img {
        width: (16/3.75vw);
        height: (16/3.75vw);
      }
    }
  }
}
</style>
